﻿'use client'

import { useState } from 'react'
import { AlignLeft, RotateCcw, Copy } from 'lucide-react'

export default function TextFormatterPage() {
  const [input, setInput] = useState('')
  const [output, setOutput] = useState('')
  const [formatType, setFormatType] = useState('uppercase')

  const formatText = (text: string, type: string): string => {
    if (!text) return ''
    
    switch (type) {
      case 'uppercase':
        return text.toUpperCase()
      case 'lowercase':
        return text.toLowerCase()
      case 'capitalize':
        return text.replace(/\b\w/g, l => l.toUpperCase())
      case 'sentence':
        return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase()
      case 'reverse':
        return text.split('').reverse().join('')
      case 'removeSpaces':
        return text.replace(/\s+/g, '')
      case 'removeLineBreaks':
        return text.replace(/\n/g, ' ').replace(/\s+/g, ' ')
      case 'addLineBreaks':
        return text.replace(/\. /g, '.\n')
      case 'trim':
        return text.trim()
      case 'removeExtraSpaces':
        return text.replace(/\s+/g, ' ').trim()
      default:
        return text
    }
  }

  const handleFormat = () => {
    const formatted = formatText(input, formatType)
    setOutput(formatted)
  }

  const handleInputChange = (value: string) => {
    setInput(value)
    const formatted = formatText(value, formatType)
    setOutput(formatted)
  }

  const copyToClipboard = () => {
    navigator.clipboard?.writeText(output)
  }

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="max-w-4xl mx-auto">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">文本格式化工具</h1>
          <p className="text-gray-600">格式化和美化文本内容，支持多种格式转换</p>
        </div>

        <div className="mb-6 flex gap-4">
          <button
            onClick={handleFormat}
            className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center gap-2"
          >
            <AlignLeft className="w-4 h-4" />
            格式化文本
          </button>
          <button
            onClick={copyToClipboard}
            className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 flex items-center gap-2"
          >
            <Copy className="w-4 h-4" />
            复制结果
          </button>
          <button
            onClick={() => { setInput(''); setOutput('') }}
            className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 flex items-center gap-2"
          >
            <RotateCcw className="w-4 h-4" />
            清空
          </button>
        </div>

        <div className="mb-6">
          <label className="block text-sm font-medium text-gray-700 mb-2">格式化类型</label>
          <select
            value={formatType}
            onChange={(e) => {
              setFormatType(e.target.value)
              if (input) {
                setOutput(formatText(input, e.target.value))
              }
            }}
            className="w-full p-2 border border-gray-300 rounded-md"
          >
            <option value="uppercase">转换为大写</option>
            <option value="lowercase">转换为小写</option>
            <option value="capitalize">首字母大写</option>
            <option value="sentence">句子格式</option>
            <option value="reverse">反转文本</option>
            <option value="removeSpaces">移除空格</option>
            <option value="removeLineBreaks">移除换行符</option>
            <option value="addLineBreaks">添加换行符</option>
            <option value="trim">去除首尾空格</option>
            <option value="removeExtraSpaces">移除多余空格</option>
          </select>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <div className="space-y-2">
            <label className="text-sm font-medium text-gray-700">输入文本</label>
            <textarea
              value={input}
              onChange={(e) => handleInputChange(e.target.value)}
              placeholder="输入要格式化的文本..."
              rows={12}
              className="w-full p-3 border border-gray-300 rounded-lg resize-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
          </div>

          <div className="space-y-2">
            <label className="text-sm font-medium text-gray-700">格式化结果</label>
            <textarea
              value={output}
              readOnly
              rows={12}
              className="w-full p-3 border border-gray-300 rounded-lg bg-gray-50 resize-none"
              placeholder="格式化后的文本将在这里显示..."
            />
          </div>
        </div>

        <div className="mt-8 bg-gray-50 p-4 rounded-lg">
          <h4 className="font-medium text-gray-900 mb-2">示例数据</h4>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <button
              onClick={() => handleInputChange('hello world! this is a test.')}
              className="text-left p-3 bg-white rounded border hover:bg-gray-50"
            >
              <div className="font-medium text-sm">英文文本</div>
              <div className="text-xs text-gray-500 mt-1">hello world! this is a test.</div>
            </button>
            <button
              onClick={() => handleInputChange('这是一个测试文本。包含中文字符。')}
              className="text-left p-3 bg-white rounded border hover:bg-gray-50"
            >
              <div className="font-medium text-sm">中文文本</div>
              <div className="text-xs text-gray-500 mt-1">这是一个测试文本。包含中文字符。</div>
            </button>
            <button
              onClick={() => handleInputChange('  多余的   空格   和换行符\n\n需要清理  ')}
              className="text-left p-3 bg-white rounded border hover:bg-gray-50"
            >
              <div className="font-medium text-sm">需要清理的文本</div>
              <div className="text-xs text-gray-500 mt-1">包含多余空格和换行符</div>
            </button>
          </div>
        </div>

        <div className="mt-6 bg-blue-50 p-4 rounded-lg">
          <h4 className="font-medium text-blue-900 mb-2">格式化选项说明</h4>
          <ul className="text-blue-800 text-sm space-y-1">
            <li>• <strong>转换为大写:</strong> 将所有字母转换为大写</li>
            <li>• <strong>转换为小写:</strong> 将所有字母转换为小写</li>
            <li>• <strong>首字母大写:</strong> 每个单词的首字母大写</li>
            <li>• <strong>句子格式:</strong> 只有第一个字母大写，其余小写</li>
            <li>• <strong>反转文本:</strong> 将文本字符顺序反转</li>
            <li>• <strong>移除空格:</strong> 删除所有空格字符</li>
            <li>• <strong>移除换行符:</strong> 将换行符替换为空格</li>
            <li>• <strong>添加换行符:</strong> 在句号后添加换行符</li>
          </ul>
        </div>
      </div>
    </div>
  )
}
